<template>
  <div class="video">
    <video
      class="frequency"
      ref="myVideo"
      :src="list?.videoUrl"
      @canplay="getTotal"
      @timeupdate="timeUpdate"
    >
      您的手机不支持播放视频
    </video>
    <van-image
      @click="broadcast"
      :class="{ con: !flag }"
      class="broadcast"
      width="55"
      height="55"
      src="https://s10.mogucdn.com/mlcdn/c45406/190516_61cf06ffkl181d5g4725kh9ccibki_165x165.png"
    />

    <div class="player">
      <div class="play">
        <van-image
          @click="play()"
          v-show="flag"
          width="17"
          height="17"
          src="https://s10.mogucdn.com/mlcdn/c45406/180723_2616hk4li424ldh25ik936dheh4h7_66x66.png"
        />
        <van-image
          @click="pause()"
          v-show="!flag"
          width="17"
          height="17"
          src="https://s10.mogucdn.com/mlcdn/c45406/180723_6i17e8ibcg5h8j0de80k4hiej627f_66x66.png"
        />
      </div>
      <div class="rate" ref="rate" @click="ProgressSeat($event)">
        <div class="top" ref="but"></div>
        <div class="but" :style="{ width: progresswidth + 'px' }"></div>
        <div class="slide" :style="{ left: progresswidth + 'px' }"></div>
      </div>
      <div class="time">{{ currentTime }}/{{ duration }}</div>
    </div>
    <!-- 上方阴影 -->
    <div class="top-shadow"></div>
    <!-- 下方阴影 -->
    <div class="but-shadow"></div>
    <!-- 名字 -->
    <div class="NetworkName">@{{ list.actorName }}</div>
    <!-- 粉丝数 -->
    <div class="item">{{ num }}<span>万</span>粉丝</div>

    <div class="commodity" @click="gotodetailed(list.iid)">
      <div class="commodity-img">
        <van-image
          class="commodity-img-img"
          width="48"
          height="48"
          :src="list.itemImage"
        />
      </div>
      <div class="commodity-text">
        <div class="commodity-text-top">{{ list.title }}</div>
        <div class="commodity-text-but">
          <div class="commodity-text-but-left">
            {{ list.isSecKillItem == 0 ? "待秒杀" : "" }}
          </div>
          <div class="commodity-text-but-right">
            {{ list.discountPrice.first }}{{ list.discountPrice.big }}.{{
              list.discountPrice.small
            }}
            <span class="dao">¥</span>
          </div>
        </div>
      </div>
      <div class="commodity-but">确认购买</div>
    </div>
    <div class="right">
      <div class="one" @click="Follow">
        <div class="img">
          <van-image width="45" height="45" :src="list.actorAvatar" />
        </div>
        <p>{{ this.interest ? "关注" : "已关注" }}</p>
      </div>

      <div class="two" @click="Collected">
        <div class="img">
          <van-image
            v-show="showCollect"
            width="40"
            height="40"
            src="https://s10.mogucdn.com/mlcdn/c45406/190510_38bf7d223d0eaeehjl0ijgci7dl82_80x80.png"
          />
          <van-image
            v-show="!showCollect"
            width="40"
            height="40"
            src="https://s10.mogucdn.com/mlcdn/c45406/190510_556ei5lh3e11e5ga45fhcjb4c86gl_80x80.png"
          />
        </div>
        <p>收藏</p>
      </div>
      <div class="two" @click="showPopup">
        <div class="img">
          <van-image
            width="40"
            height="40"
            src="https://s10.mogucdn.com/mlcdn/c45406/190510_87kkdk3c1lca99ab62g4j72691j4h_80x80.png"
          />
        </div>
        <p>14</p>
      </div>
      <div class="two" @click="gotocart">
        <div class="img">
          <van-image
            width="40"
            height="40"
            src="https://s10.mogucdn.com/mlcdn/c45406/190510_0ak4i1ed75d0e4i95el2cc2jeke0c_80x80.png"
          />
        </div>
        <p>购物车</p>
      </div>
      <van-popup
        close-icon="PurchaseComments"
        v-model="show"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <div class="Purchase-top">购买评价 <span>1</span></div>
        <div class="Purchase-but">
          <div class="Purchase-but-item">
            <div class="Purchase-but-item-top">
              <div class="left">
                <van-image
                  width="32"
                  height="32"
                  src="https://s5.mogucdn.com/b7/avatar/150415/1iowlk_iezwiyzsmi3ginbzgazdambqgyyde_480x270.jpg_80x999.v1c96.40.webp"
                />
              </div>
              <div class="center">
                <p>陌初寒上000</p>
                <span>02/06 16:43</span>
              </div>
            </div>
            <div class="Purchase-but-item-but">
              质量挺好，没有多余的线头，长度也合适，，
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 弹幕 -->
    <!-- <div class="barrage">
            <ul>
                <li>
              
                    <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                    <span></span>
                </li>
            </ul>
        </div> -->
  </div>
</template>

<script>
import { commentAPI } from "../../api/home";
export default {
  data() {
    return {
      list: this.$route.params.list,
      // 判断是否播放
      flag: true,
      // 时间
      currentTime: "00:00", // 当前时间
      duration: "00:00", // 总时间
      // 进度条当前长度
      progresswidth: 0,
      // 是否收藏
      showCollect: true, //是否收藏
      // 关注
      interest: true,
      // 评论
      show: false,
      // 弹幕数据
      barrage: "",
    };
  },
  //
  methods: {
    // 获取评论
    async CommentOn() {
      let url = commentAPI(this.list.itemIdUrl, this.list.actorIdUrl);
      let { data } = await this.$axios(url);
      this.barrage = data.data.itemExplainList;
    },
    // 点击中间播放暂停
    broadcast() {
      if (this.flag) {
        this.flag = false;
        this.$refs.myVideo.play();
      } else {
        this.flag = true;
        this.$refs.myVideo.pause();
      }
    },
    // 点击左下角播放
    play() {
      this.$refs.myVideo.play();
      this.flag = false;
    },
    // 点击左下角暂停
    pause() {
      this.$refs.myVideo.pause();
      this.flag = true;
    },
    // 总时长
    getTotal() {
      this.duration = this.ReplenishZero(this.$refs.myVideo.duration);
    },
    // 获取视频当前时间
    timeUpdate() {
      // 当前时间
      let current = this.$refs.myVideo.currentTime;
      // 总时间
      let dura = this.$refs.myVideo.duration;
      // 总宽度
      let wid = this.$refs.rate.offsetWidth;
      // 当前宽度
      this.progresswidth = (current / dura) * wid;

      // 当前时间
      this.currentTime = this.ReplenishZero(this.$refs.myVideo.currentTime);
    },
    // 补零
    ReplenishZero(time) {
      let minute = Math.floor((time % 3600) / 60);
      let second = Math.floor(time % 60);
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return `${minute}:${second}`;
    },
    // 点击改变进度条的位置
    ProgressSeat(e) {
      // 当前宽度
      let dw = e.pageX - this.$refs.rate.offsetLeft;
      // 总宽度
      let wid = this.$refs.rate.offsetWidth;
      // 总时间
      let all = this.$refs.myVideo.duration;

      this.$refs.myVideo.currentTime = (dw / wid) * all;
      this.timeUpdate();
      this.play();
    },
    // 收藏
    Collected() {
      console.log(1);
      this.showCollect = !this.showCollect;
      this.$store.commit("add", {
        follow: this.interest, // 关注
        showCollect: this.showCollect, // 收藏
        itemId: this.list.itemId, // 商品id
        actorId: this.list.actorId, // 主播id
      });
      this.collect();
    },
    // 关注
    Follow() {
      this.interest = !this.interest;
      this.$store.commit("add", {
        follow: this.interest, // 关注
        showCollect: this.showCollect, // 收藏
        itemIdUrl: this.list.itemIdUrl, // 商品id
        actorIdUrl: this.list.actorIdUrl, // 主播id
        img: this.list.actorAvatar, //头像
        name: this.list.actorName, //主播昵称
        num: this.num,
        character: this.list.actorTag, //特性
      });
    },
    // 评论
    showPopup() {
      this.show = true;
    },
    // 跳转到购物车
    gotocart() {
      this.$router.push("shoppingCar");
    },
    // 进入页面先判断是否关注收藏
    gainData() {
      let data = this.$store.state.date;
      for (var i = 0; i < data.length; i++) {
        if (data[i].actorId == this.list.actorId) {
          this.showCollect = data[i].follow;
          this.interest = data[i].showCollect;
        }
      }
    },
    // 跳转到商品详情页
    gotodetailed(id) {
      this.$router.push({ name: "goods-detail", params: { id: id } });
    },
    // 收藏
    collect() {
      let collect = this.getLocalStroge("collect");
      console.log(collect);
      let buy = this.list.sale.split("");
      let buynum = buy.slice(2, buy.length).join("");
      let params = {
        id: this.list.actorIdUrl,
        img: this.list.actorAvatar,
        title: this.list.title,
        price: this.list.showDiscountPrice,
        sells: buynum,
      };
      if (!this.showCollect) {
        // console.log("collect", !collect);

        //添加收藏
        if (!collect) {
          console.log(222);
          this.setLocalStroge("collect", [params]);
        } else {
          console.log(111);

          let flag;

          if (collect) {
            flag = false;
          } else {
            flag =
              collect.map((item) => this.list.actorId == item.id).length == 0
                ? true
                : false;
          }

          if (!flag) {
            let newCollect = [...collect, params];
            this.setLocalStroge("collect", newCollect);
          } else {
            console.log("该商品已经收藏了", this.list.actorId, flag);
          }
        }
      } else {
        //删除收藏
        let newCollect = collect.filter((item) => {
          return this.list.actorId != item.id;
        });
        this.setLocalStroge("collect", newCollect);
      }
      this.collectFlag;
    },
    collectFlag() {
      let collect = this.getLocalStroge("collect");
      let newCollect = collect.filter((item) => {
        return this.list.actorIdUrl == item.id;
      });
      if (newCollect.length == 0) {
        console.log("未收藏");

        this.showCollect = true;
      } else {
        console.log("已经收藏过了");
        this.showCollect = false;
      }
    }, 
    // 进入时判断关注和收藏是true还是false
    judge() {
      let data = this.$store.state.date;
      for (var i = 0; i < data.length; i++) {
        if (data[i].actorId == this.list.actorId) {
          this.interest = data[i].actorId;
          this.showCollect = data[i].showCollect;
        }
      }
    },
  },
  mounted() {
    this.gainData();
    this.CommentOn();
    this.judge();
  },
  computed: {
    // 粉丝数量
    num() {
      let num = this.list.explainId;
      if (num >= 10000) {
        num = num / 10000;
        num = num.toFixed(1);
      }
      return num;
    },
  },
};
</script>
<style lang="scss" scoped>
.video {
  position: relative;
  width: 100vw;
  height: 100vh;

  // 弹幕
  .barrage {
    width: 128px;
    height: 27px;
  }

  .frequency {
    width: 100%;
    height: 100%;
  }
  .broadcast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    &.con {
      display: none;
    }
  }
  .player {
    width: 100%;
    height: 45px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .rate {
      width: 50%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .top {
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #fff;
        z-index: 100;
      }
      .but {
        position: absolute;
        width: 0px;
        height: 3px;
        background-color: #aeaeae;
        z-index: 200;
      }

      .slide {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        top: -6px;
        left: -5px;
        z-index: 300;
      }
    }
    .time {
      font-size: 14px;
      color: #fff;
      font-weight: 600;
      z-index: 100;
    }
    .play {
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .top-shadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 130px;
    background-image: linear-gradient(
      0deg,
      transparent,
      rgba(0, 0, 0, 0.02) 18%,
      rgba(0, 0, 0, 0.6)
    );
  }
  .but-shadow {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 230px;
    background-image: linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.02) 18%,
      rgba(0, 0, 0, 0.6)
    );
  }
  .NetworkName {
    position: absolute;
    left: 25px;
    top: 75%;
    font-size: 16px;
    color: #fff;
  }
  .item {
    position: absolute;
    left: 25px;
    top: 79%;
    color: hsla(0, 0%, 100%, 0.6);
    font-size: 12px;
  }
  .commodity {
    position: absolute;
    left: 15px;
    bottom: 50px;
    width: 92%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .commodity-img {
      width: 48px;
      height: 48px;
      margin-right: 10px;
      .commodity-img-img {
        width: 100%;
        height: 100%;
      }
    }
    .commodity-text {
      height: 100%;
      width: 188px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .commodity-text-top {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        color: #fff;
        text-shadow: 0 0.01rem 0 rgb(0 0 0 / 23%);
        margin-top: 8px;
      }
      .commodity-text-but {
        margin-bottom: 4px;
        display: flex;
        .commodity-text-but-left {
          width: 38px;
          height: 15px;
          font-size: 12px;
          margin-right: 5px;
          background: linear-gradient(150deg, #fb872c, #fc4441);
          border-radius: 2px;
          display: inline-block;
          color: #fff;
        }
        .commodity-text-but-right {
          font-size: 17px;
          font-weight: 600;
          color: #fa4e82;
          text-shadow: 0 0.01rem 0 rgb(0 0 0 / 23%);
          .dao {
            font-size: 12px;
            margin-left: 3px;
            color: #999;
          }
        }
      }
    }
    .commodity-but {
      width: 72px;
      height: 26px;
      font-size: 12px;
      background-color: #ff4466;
      text-align: center;
      line-height: 26px;
      border-radius: 20px;
      color: #fff;
    }
  }
  .right {
    position: absolute;
    right: 5px;
    bottom: 140px;
    width: 50px;
    .one {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      p {
        margin: 0px;
        height: 18px;
        width: 40px;
        border-radius: 9px;
        font-size: 12px;
        color: #fff;
        background-color: #ff4466;
        text-align: center;
        line-height: 18px;
        position: absolute;
        bottom: -5px;
      }
      .img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .two {
      display: flex;
      margin-top: 16px;
      flex-direction: column;
      align-items: center;
      p {
        margin: 0px;
        font-size: 12px;
        color: #fff;
      }
    }
  }
  .van-popup {
    background-color: #fff;
    color: #999999;
    .Purchase-top {
      height: 45px;
      line-height: 45px;
    }
    .Purchase-but {
      .Purchase-but-item {
        .Purchase-but-item-top {
          display: flex;
          .left {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            overflow: hidden;
            margin-left: 12px;
          }
          .center {
            p {
              font-size: 20px;
              color: #999;
              margin: 0px 0px 0px 12px;
            }
            span {
              font-size: 12px;
              color: #999;
              margin-top: 2px;
              margin-left: 12px;
            }
          }
        }
        .Purchase-but-item-but {
          font-size: 14px;
          margin: 4px 12px 30px 56px;
        }
      }
    }
  }
}
</style>